<div class="container">
  <div class="col-md-8 col-md-offset-2">
    <div class="panel panel-default">
      <div class="panel-body">
        <a target="_blank" class="btn btn-primary btn-sm" href="/static/create?appId=<%= appId %>">添加文章</a>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
      静态文件
      </div>
      <div class="panel-body">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>路由名</th>
              <th>标题</th>
              <th>html格式</th>
              <th>对比模式</th>
              <th>action</th>
            </tr>
          </thead>
          <tbody>
            <tr v-if="staticList.length > 0" v-for="(index, item) in staticList">
              <td style="width: 80px"><a href="/static/{{ item.name }}/show?appId={{appId}}">{{ item.name }}</a></td>
              <td style="width: 200px">{{ item.title }}</td>
              <td style="width: 40px" class="opts">
                <a class="active" v-if="item.isHtml"><i class="fa fa-check"></i></a>
                <a v-else><i class="fa fa-close"></i></a>
              </td>
              <td style="width: 40px" class="opts">
                <a class="active" v-if="item.isContrast"><i class="fa fa-check"></i></a>
                <a v-else><i class="fa fa-close"></i></a>
              </td>
              <td style="width: 20px">
                <div class="btn-group disabled">
                  <button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    操作 <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu disabled">
                    <li><a href="/static/{{ item.name }}/edit?appId=<%= appId %>">编辑</a></li>
                    <li class="divider"></li>
                    <li><a v-on:click="onDelete(index)">删除</a></li>
                  </ul>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <p v-show="staticList.length < 1">无数据</p>
      </div>
    </div>
  </div>
</div>
<script>
  var appId = $('[name=app-id]').val();
  var pagePrefix = '<%= apiPrefix.page %>';
  var dataPrefix = '<%= apiPrefix.data %>';
  var vue = new Vue({
    el: '#app',
    data: {
      pageTitle: '全部',
      appId: '',
      staticList: [],
      errorMsg: '',
      successMsg: '',
    },
    methods: {
      getData: function(nextPage) {
        $.post( dataPrefix + '/static/list',
          {
            appId: appId
          },
          function(result) {
            vue.canLoadData = true;

            if (result.err) {
              vue.errorMsg = result.err;
              return;
            }

            vue.currentPage = result.currentPage;
            vue.pages = result.pages;
            vue.updateList(result.data);
        });
      },
      updateList: function(docs) {
        docs.forEach( function(item){
          vue.staticList.push(item)
        });
      },
      onDelete: function(index) {
        if (confirm('确定要删除吗？')) {
          $.post( dataPrefix + '/static/' + vue.staticList[index]._id + '/delete?appId=' + appId,
            {
              appId: appId,
              _csrf: $('#_csrf').val()
            },
            function (result) {
              if (result.err) {
                vue.errorMsg = result.err;
              } else {
                vue.staticList.$remove(vue.staticList[index]);
              }
          });
        }
      }
    }
  });

  vue.appId = appId;
  vue.getData();
</script>
